<template>
    <div>
        <h1>公因数/公倍数</h1>
        <div>
            <el-form label-width="80px" >
                <el-form-item label="数字1：">
                    <el-input-number v-model="formData.num1"></el-input-number>&nbsp;
                </el-form-item>
                <el-form-item label="数字2：">
                    <el-input-number v-model="formData.num2"></el-input-number>&nbsp;
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="calc">计算</el-button>
                </el-form-item>
                <el-form-item label="结果：" >
                    <el-alert v-if="dataList.length <= 1"
                            title="无除1以外的公因数"
                            type="error"
                            effect="dark">
                    </el-alert>
                    <div v-if="dataList.length > 1">
                        <table class="gong_table"  cellspacing="0" v-for="(row, index) in dataList" :key="index"  :style="{'padding-left': index * 3 + 'px'}">
                            <tr>
                                <td style="width:30px;">
                                    {{row.isLastRow ? '&nbsp;&nbsp;&nbsp;&nbsp;' : row.factor}}
                                </td>
                                <td :class="{'border_bottom': !row.isLastRow, 'border_left': !row.isLastRow}" :style="{'width': tdWidth + 'px'}">
                                    {{row.num1}}
                                </td>
                                <td :class="{'border_bottom': !row.isLastRow}" style="padding-left:5px;"  :style="{'width': tdWidth + 'px'}">
                                    {{row.num2}}
                                </td>
                            </tr>
                        </table>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "gong.vue",
        data() {
            return {
                formData: {
                    num1: 12,
                    num2: 18,
                },
                dataList: [],
            }
        },
        methods: {
            getFactor(num1, num2) {
              let factor = 1
              for (let i = 2; i <= Math.min(num1, num2); i++) {
                if (num1 % i == 0 && num2 % i == 0) {
                    factor = i
                    break
                }
              }
              return factor
            },
            calc() {
                let dataList = []
                let num1 = this.formData.num1;
                let num2 = this.formData.num2;
                let factor = null
                do {
                    factor = this.getFactor(num1, num2)
                    let isLastRow = factor == 1
                    dataList.push({
                        'num1': num1,
                        'num2': num2,
                        'factor': factor,
                        'isLastRow': isLastRow,
                    })
                    num1 /= factor
                    num2 /= factor
                } while(factor > 1)
                this.dataList = dataList
            }
        },
        computed: {
            tdWidth() {
                return (Math.max(this.formData.num1, this.formData.num2) + "").length * 15
            },
        },
        mounted() {
            this.calc()
        }
    }
</script>

<style scoped>
    .gong_table {

    }
    .gong_table td {
        font-size: 20px;
        padding:2px;
        /*width: 30px;*/
        /*overflow: hidden;*/
        display: inline-block;
        /*white-space: nowrap;*/
    }
    .border_bottom {
        border-bottom: 3px solid green;
    }
    .border_left {
        border-left: 3px solid green;
    }
    .border_left_white {
        border-left: 3px solid white;
    }
</style>
